<template>
  <div class="box">
    


      <transition>
          <keep-alive include="order">
              <router-view></router-view>
          </keep-alive>

      </transition>

    <foot class="foot"></foot>
        
  </div>
</template>
<script>
  import foot from './components/subComs/footer.vue'
  export default {
      data(){
        return {

        }
      },
        components:{
          foot
        },
      mounted() {
          window.addEventListener('unload',this.saveState())
          // window.addEventListener("load", () => {
          //     sessionStorage.clear();
          // });
      },
      methods:{
          saveState(){
              sessionStorage.setItem('user',window.JSON.stringify(this.$store.state.user))
          }
      }
  }
</script>
<style lang='less' scoped>
* {
  padding: 0;
  margin: 0;
}
.box {
  overflow-x: hidden;
  padding-bottom: 50px;
}
.foot{
  position: fixed;
  bottom: 0;
  width:100%;
}

/* v-enter 【进入之前，元素的起始状态】 */
/* v-leave-to 【动画离开之后，离开的终止状态】 */
.v-enter{
  opacity: 0;
  transform: translateX(100%);
  
}
.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
  transition: all 0.4s ease;
}
.v-move {
  transition: all 0.4s ease;
}
/* 一般配合 v-leave-active / v-enter-active 使用 */
.v-leave-active{
  position: absolute;
}
html{
  background-color: #fff;
}


</style>